<template>
  <div>
    <div class="share-page">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/user-permission' }"
          >角色权限模板</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/add-user-permission' }"
          >添加权限模版</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="monitoring-content">
      <div class="title">添加权限模板</div>
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :inline="true"
        :model="formInline"
        style="width: 100%"
      >
        <div class="search-item">
          <el-form-item label="角色名称:" class="name" prop="name">
            <el-input v-model="formInline.name" placeholder="请输入角色名称">
            </el-input>
          </el-form-item>
          <el-form-item label="角色描述:" prop="desc">
            <el-input
              v-model="formInline.desc"
              placeholder="请输入角色描述，如角色的用处或拥有的权限"
            >
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div class="role">角色权限</div>
      <div class="box-sb">
        <div class="content-box">
          <div class="right">
            <div class="common-box">
              <div class="box-title">电脑端允许的权限</div>
              <div class="box-content">
                <el-tree-v2
                  style="max-width: 600px"
                  :data="dataLeft"
                  props="{
          children: 'children',
          label: 'label'
        }"
                  show-checkbox
                  :height="408"
                />
              </div>
            </div>
          </div>
          <div class="left">
            <div class="common-box">
              <div class="box-title">手机端允许的权限</div>
              <div class="box-content">
                <el-tree-v2
                  style="max-width: 600px"
                  :data="dataRight"
                  props="{
          children: 'children',
          label: 'label'
        }"
                  show-checkbox
                  :height="408"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-c">
      <el-button round color="#0071bb">保存</el-button>
      <el-button round>取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

const dataLeft = [
  {
    id: 1,
    label: "一级 1",
    children: [
      {
        id: 4,
        label: "二级 1-1",
        children: [
          {
            id: 9,
            label: "三级 1-1-1",
          },
          {
            id: 10,
            label: "三级 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "一级 2",
    children: [
      {
        id: 5,
        label: "二级 2-1",
      },
      {
        id: 6,
        label: "二级 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "一级 3",
    children: [
      {
        id: 7,
        label: "二级 3-1",
      },
      {
        id: 8,
        label: "二级 3-2",
      },
    ],
  },
];
const dataRight = [
  {
    id: 1,
    label: "一级 1",
    children: [
      {
        id: 4,
        label: "二级 1-1",
        children: [
          {
            id: 9,
            label: "三级 1-1-1",
          },
          {
            id: 10,
            label: "三级 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "一级 2",
    children: [
      {
        id: 5,
        label: "二级 2-1",
      },
      {
        id: 6,
        label: "二级 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "一级 3",
    children: [
      {
        id: 7,
        label: "二级 3-1",
      },
      {
        id: 8,
        label: "二级 3-2",
      },
    ],
  },
];

const formInline = ref({
  desc: "",
  name: "",
});
const rules = reactive({
  name: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
});
</script>
<style lang="scss" scoped>
:deep() {
  .el-button--danger {
    background: rgb(255, 0, 0);
  }
  .el-form-item.is-required:not(.is-no-asterisk).asterisk-left
    > .el-form-item__label:before {
    color: #4d4d4d !important;
  }
  .el-form-item__error {
    color: #989898 !important;
  }
  .el-form-item {
    width: 100% !important;
  }
  .role {
    color: var(--el-text-color-regular);
    font-size: 14px;
    margin-left: 10px;
    margin-bottom: 10px;
  }
  .box-sb {
    .el-form-item {
      width: 33.3% !important;
      .el-select {
        width: 100% !important;
      }
    }
  }
}

.monitoring-content {
  background: #fff;
  padding: 10px 10px 0px 10px;
  height: 80vh !important;
  .title {
    color: #4d4d4d;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .common-box {
    color: #4d4d4d;
    width: 100%;
    border: 1px solid #ccc;
    font-size: 12px !important;
    margin-bottom: 10px;
    th {
      background: #00ffff !important;
      color: #4d4d4d !important;
    }

    .box-title {
      background: #00ffff;
      padding: 10px;
    }
    .box-content {
      padding: 10px;
      .date-tabs {
        text-align: center;
        display: flex;
        font-size: 12px;

        .tabs-item {
          width: 100px;
          background-color: #fff;
          border: 1px solid #d2d2d2;
          border-radius: 20px;
          margin-right: 15px;
        }

        .activity-item {
          background-color: #0071bb;
          border: 1px solid #0071bb;
          color: #fff;
        }

        .tabs-item:hover {
          cursor: pointer;
        }
      }
    }
  }
}
.content-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .right {
    width: 50%;
  }
  .left {
    width: 50%;
    padding: 0px 10px;
  }
  .tables-box {
    height: 30vh;
    // padding: 0px 10px;
  }
  .b-1 {
    border: 1px solid #ccc;
  }
}
.choice-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  .info-msg {
    font-family: Source Han Sans CN;
    font-size: 12px;
    color: #989898;
  }
  .choice-item {
    width: 30%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .el-select {
      width: 250px;
    }
    .choice-title {
      font-size: 12px;
      width: 100px;
      text-align: center;
    }
    .rounded-input {
      width: 250px;
    }
  }
}
.flex-c {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.search {
  display: flex;
  justify-content: space-between;
  // margin-bottom: 10px;
  padding: 0 10px;
}
.search-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .btn {
    align-self: right;
  }
  .name {
    width: 80% !important;
  }
}
.mx-10 {
  margin: 0px 10px;
}
.box-sb {
  display: flex;
  align-content: start;
  justify-content: space-between;
  position: relative;
}
.info {
  position: absolute;
  top: 38px;
  left: 78px;
  font-family: Source Han Sans CN;
  font-size: 12px;
  color: #989898;
}
.info1 {
  top: 27px;
  left: 3px;
}
</style>
